define([
  'jquery',
  'underscore',
  'backbone',
  'models/user/UserModel',
  'text!templates/mon/dsMonTemplate.html'
], function($, _, Backbone,UserModel, dsMonTemplate){
    var getMon=function(id){       // ham lay danh sach cac mon dua vao table theo tham so id
        var data = []; //tao mang rong
        var viewModel = { 
            vendors: ko.observableArray(data)  // gan mang data vao vendors         
        };
        ko.applyBindings(viewModel, $(".table")[0]); // applyBindings vao element co class="table" o phan tu thu 0.    


        var CartLine = function() {
            var self = this;
            self.category = ko.observable("");
            self.product = ko.observable("");
            self.quantity = ko.observable(1);
            self.subtotal = ko.computed(function() {
                return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0;
            });
         
            // Whenever the category changes, reset the product selection
            self.category.subscribe(function() {
                self.product(undefined);
            });
        };
         ko.applyBindings(new CartLine(), $(".form")[0]);   //applyBindings vao form 
         
        $.ajax({ // bat dau xu li bang ajax
            url: "server.php",        //url server xu ly du lieu
            type: "POST",             // phuong thuc post
            data: {getMon:id},   // gan du lieu vao bien data de truyen di theo id o tren truyen vao
            success: function (data) {
               getData = $.parseJSON(data); // lay du lieu tra ve va chuyen ve kieu ban dau
               for (var i = 0; i < getData.length; i++) {
                  //console.log(getData[i].MAMON+"--"+getData[i].MANHOM+"--"+getData[i].TENMON+"--"+getData[i].DONGIA+"--"+getData[i].DVT);           
               };
              viewModel.vendors(getData); // gan di lieu moi vao bien getData va apply vao viewModel
              viewModel.allItems(getData);
            }
        });       
      };// ket thuc ham getMon()

  var DsMonView = Backbone.View.extend({
      el: $("#contentPage"),
      render: function(){
         console.log("-->DsMonView.js"); // ghi nhat ki vao console
        $('.menu li').removeClass('active'); //xoa bo class css cu khi click vao link
        $('.menu li a[href="#/add"]').parent().addClass('active'); // add class css moi
        this.$el.html(dsMonTemplate); // add template
        var getmon= new getMon("all");  // goi ham lay danh sach mon va truyen tham so vao
      }, 
    	events: { // set event for elements html in template view 	
       
    	},
  });

  return DsMonView;
  
});
